iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
自我挑戰組

小白網頁設計練成記系列 第 19

小白網頁設計練成記-DAY19-選取器-符號

  • 分享至 

  • xImage
  •  

今天我們來認識六個符號,可以讓你的選取器有更多變化,以下是,/空格/ + / * / ~的說明:

逗號 想成[或]的意思

換言之是可以有多個元素選取器一起編輯,套用一樣的樣式,看下方範例,h1/h2/p都是要設定為紅色:

<style>
        h1,h2,p{
            color:red;
    </style>
</head>
<body>
    <h1>這是標題一</h1>
    <h2>這是標題二</h1>
    <p>這是段落一</p>
</body>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034ulpNENOsNm.jpg

空格 內層全部

我們先看範例:

<style>
section p{ 
            color:red;
        }
</style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
</body>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034ARyrzLXDAk.jpg

上述例子中,section p的意思是,只能選取section中的 p,其他的都不行,可以理解為在section家族中的p才能獲選!

> 限定第一層子元素

>比空格更嚴格,只有家族內的長子才能獲選~請看下面示範:

<style>
    div > p{
            color:red;
            }
</style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034fbIt3aFNgV.jpg

從上面例子中,div家族中段落二是長子,而section就是次子,所以在>的條件下,只有長子能獲選,section次子只能乾瞪眼。

+ 同層的下一個元素,只有大弟或大妹獲選

+是獲取同層的目標,但只能是剛好排在後面的大弟或大妹。

<style>
div+p{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034FMPZaYT0Op.jpg

~ 同層後面的所有的元素-弟弟妹妹都獲選

~ 和 + 都是獲取同一層級的標籤,但是 ~ 範圍比較大,只要是弟弟妹妹都ok。

<style>
div~p{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>
    <p>段落五</p>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034y2b3wlCPSU.jpg

## * 萬用元素,通通獲取
*萬用元素,就是只要是元素,都在範圍內。

<style>
   *{
            color:red;
        } 
    </style>
</head>
<body>
    <p>這是段落一</p>
    <div>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
    </div>
    <p>段落四</p>
    <p>段落五</p>

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220919/20152034XY5ZjkQ3Ec.jpg

我是結語

今天是鐵人賽的第19天啦,也是Eric自學的第26天,時間真的過得非常快,一眨眼就堅持了那麼久呢
非常感謝鐵人賽專門設置一個自我挑戰區,讓小白能從自我簡單的啟動起來,畢竟人生最大的對手就是自己~


上一篇
小白網頁設計練成記-DAY18-CSS選取器-屬性/值
下一篇
小白網頁設計練成記-DAY20-選取器class/id
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言